<template>
  <view  v-if="swiperList.length" class="class-wrap">
		<view class="date-wrap">
			<image class="banner" src="/static/images/class/banner.png"></image>
			<view class="header" @click="handlerBack">
				<image src="/static/images/class/back.png"></image>
				<view class="desc">课程表</view>
			</view>
			<view class="cur-date">
				<view class="left">
					<view class="dot"></view>
					<view class="dot"></view>
				</view>
				<view class="right">{{ yearMonth }}</view>
			</view>
			<date-list v-if="weekDate.length" :list="weekDate" :indexActive.sync="currentIndex" class="date-list"></date-list>
		</view>
		<swiper-class :currentIndex.sync="currentIndex" :swiper-list="swiperList"></swiper-class>
	</view>
</template>

<script>
import lunar from '../../utils/lunarCalendar'
import dateList from './components/dateList'
import swiperClass from './components/swpierClass'
import { zeroFill } from '../../utils/index'
import { timeTable} from '../../api/timetable'
export default {
	name: 'classSchedule',
	components: {
		dateList,
		swiperClass
	},
	data() {
		return {
			weekDate: [],
			yearMonth: '',
			currentIndex: 0,
			swiperList: []
		}
	},
	onLoad() {
		this.initDate()
		this.initCurrentIndex()
		this.initClass()
	},
	methods: {
		handlerBack() {
			uni.navigateBack({
				delta: -1,
				animationType: 'pop-out'
			})
		},
		initDate() {
			const weekDate = lunar.getWeekDate()
			this.weekDate = weekDate
			this.yearMonth = weekDate[0].substr(0, 7)
		},
		initCurrentIndex() {
			const now = new Date()
			const year = now.getFullYear()
			const month = zeroFill(now.getMonth() + 1)
			const date = zeroFill(now.getDate())
			const currentDate = `${year}-${month}-${date}`
			const index = this.weekDate.findIndex((item) => {
				return item === currentDate
			})
			this.currentIndex = index > -1 ? index : 0
		},
		handleChange(e) {
			this.currentIndex = e
		},
		// 课程列表
		async initClass() {
			uni.showLoading({
				title: '加载中'
			})
			const list = await timeTable()
			uni.hideLoading()
			const swiperList = []
			for(let i = 0; i< 7; i++) {
				swiperList[i] = []
			}
			list.map((item) => {
				item.courseWeek === 1 ? swiperList[0].push(item) : item.courseWeek === 2 ? swiperList[1].push(item) : item.courseWeek === 3 ? swiperList[2].push(item) : item.courseWeek === 4 ?
				swiperList[3].push(item) : item.courseWeek === 5 ? swiperList[4].push(item) :item.courseWeek === 6 ? swiperList[5].push(item) : swiperList[6].push(item)
			})
			this.swiperList = swiperList
		}
	}
}

</script>
<style lang='scss' scoped>
	.class-wrap{
		width: 100%;
		min-height: 100vh;
		.date-wrap {
			width: 100%;
			height: 480upx;
			padding-top: 20upx;
			box-sizing: border-box;
			position: relative;
			.banner{
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
			}
			.header{
				width: 100%;
				height: 142upx;
				box-sizing: border-box;
				position: absolute;
				text-align: center;
				image {
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					left: 0;
					width: 60upx;
					height: 60upx;
				}
				.desc{
					line-height: 142upx;
					font-size: 42upx;
					color: #fff;
				}
			}
			.cur-date{
				width:264upx;
				height:90upx;
				background:rgba(255,85,85,1);
				border-radius:0px 10upx 10upx 0px;
				position: absolute;
				top: 154upx;
				left: 0;
				display: flex;
				justify-content: center;
				padding: 20upx 0;
				box-sizing: border-box;
				.right{
					width:200upx;
					height:100%;
					background:rgba(255,255,255,1);
					border-radius:24upx;
					font-size: 38upx;
					color: #333;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.left{
					display: flex;
					height: 100%;
					flex-direction: column;
					padding: 8upx 0;
					box-sizing: border-box;
					justify-content: space-between;
					margin-right: 10upx;
					.dot{
						width:14upx;
						height:14upx;
						background:rgba(155,19,19,1);
						position: relative;
						border-radius:50%;
						&::before{
							content: '';
							position: absolute;
							top: 4upx;
							left:6upx;
							width:4upx;
							height:4upx;
							background:rgba(255,213,213,1);
							border-radius:50%;
						}
					}
				}
			}
			.date-list{
				position: absolute;
				top: 298upx;
				left: 20upx;
			}
		}
		
	}
</style>